<template>
  <div class="box">
    <top></top>
    <div class="mine">
      <div class="w1398">
        <div class="menu">
          <ul>
            <li>
              <h3 style="font-size: 18px;">{{stid}}</h3>
            </li>
            <li>{{class_name}}</li>
          </ul>
        </div>
        <div class="right fr">
          <!-- 热门推荐 -->
          <div class="tj" v-if="list">
            <h2>{{class_name}}</h2>
            <div class="border"></div>
            <ul>
              <li
                v-for="(item,index) in list"
                :key="index"
                @click="goto(item.url,item.type)"
                :title="item.descript"
                @mouseover="showImg(index)"
                @mouseout="hideImg(item.qr_code)"
              >
                <div class="left fl">
                  <img :src="item.logo" alt style="width:100%;height:100%" />
                </div>
                <div class="right fl">
                  <h3>{{item.title}}</h3>
                  <p>{{item.descript}}</p>
                </div>
                <div class="qr_code" v-if="item.type==2&&active==index">
                  <i class="icon_top"></i>
                  <img
                    :src="'https://jiu.zhongyi9999.com'+item.qr_code"
                    alt
                    style="width:150px;height:150px"
                  />
                </div>
              </li>
            </ul>
            <!-- 分页 -->
            <div class="fenye" style="width:100%;text-align:center;margin-top:20px">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>
<script>
import top from "@/components/top.vue";
import foot from "@/components/foot.vue";
export default {
  components: {
    top,
    foot
  },
  data() {
    return {
      id: "",
      list: [],
      class_name: "",
      name: "",
      stid: "股票",
      // 总数据
      tableData: [],

      // 默认显示第几页
      currentPage: 1,

      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 1,

      // 默认每页显示的条数（可修改）
      pageSize: 32,
      active: ""
    };
  },
  created() {
    var id = sessionStorage.stid * 1;
    console.log("id" + id);
    switch (id) {
      case 2:
        this.stid = "期货";
        break;
      case 3:
        this.stid = "外汇";
        break;
      case 4:
        this.stid = "黄金";
        break;
      case 6:
        this.stid = "基金";
        break;
      default:
        break;
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    this.name = this.$route.params.name;
    console.log(this.id);
    console.log(this.name);
    var that = this;
    this.$http
      .get(this.GLOBAL.serverSrc + "/api/findByCateWebSiteList", {
        params: {
          class_id: this.id
        }
      })
      .then(res => {
        console.log(res.data.data.cate_info.class_name);
        that.class_name = res.data.data.cate_info.class_name;
        that.list = res.data.data.data;
        that.total = res.data.data.count;
        // that.class_name = that.list[0].class_name;
      });
  },
  methods: {
    goto(url, type) {
      if (type == 1) {
        window.open(url, "_blank"); // 新窗口打开外链接
      }
    },
    showImg(index) {
      this.active = index;
    },
    hideImg() {
      this.active = -1;
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.$http
        .get("http://" + this.GLOBAL.serverSrc + "/api/findByCateWebSiteList", {
          params: {
            class_id: this.id,
            pageIndex: this.currentPage
          }
        })
        .then(res => {
          this.list = res.data.data.data;
          this.total = res.data.data.count;
        });
    }
  }
};
</script>

<style scoped>
@media screen and (min-width: 1024px) {
  .mine {
    min-height: 658px;
    padding-bottom: 20px;
    background-color: #f1f4f9;
  }
  .w1398 {
    width: 1398px;
    margin: auto;
    display: flex;
  }
  .qr_code {
    padding: 10px;
    border: 1px solid #bc8339;
    box-shadow: 1px 0px 3px #bc8339;
    position: absolute;
    top: 78px;
    left: 0;
    width: 150px;
    height: 150px;
    background: #fff;
    z-index: 1000;
  }
  .icon_top {
    background: url(../assets/image/top.png) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    background-size: 100%;
    top: -13px;
    left: 23px;
  }
  .menu {
    width: 12%;
    text-align: center;
    margin-top: 40px;
  }
  .menu ul li {
    line-height: 50px;
  }
  .menu ul li:nth-child(2) {
    color: #bc8339;
    background: url(../assets/image/icon_50.png) no-repeat 25px center;
  }
  .w1398 > .right {
    width: 1217px;
    /* height: 498px; */
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    margin-top: 31px;
    /* padding-left: 40px; */
    box-sizing: border-box;
    /* padding-right: 58px; */
  }
  .w1398 > .right h2 {
    font-size: 20px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    margin: 20px 0;
  }
  .right p {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
  }
  .tj {
    /* width: 80%; */
    /* height: 265px; */
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    padding-bottom: 30px;
  }

  .tj h2 {
    font-size: 20px;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    padding-left: 20px;
    margin-top: 30px;
    /* transform: translateX(-40px); */
  }
  .box .tj .border {
    width: 1217px;
    height: 1px;
    background: rgba(230, 230, 230, 1);
    /* transform: translateX(-40px); */
  }
  .tj ul {
    padding: 22px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    min-height: 120px;
  }
  .tj ul li {
    width: 25%;
    padding: 14px 1%;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
  }
  .tj ul li .left {
    width: 45px;
    height: 45px;
    /* background: rgba(76, 180, 247, 1); */
    border-radius: 6px;
  }
  .tj ul li .right {
    margin-left: 13px;
  }
  .tj ul li .right h3 {
    font-size: 16px;
    color: rgba(77, 77, 77, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }
  .tj ul li .right p {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }
  .w1398 {
    width: 1398px;
    margin: auto;
  }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
  html {
    font-size: 62.5%;
    font-size: calc(100vw / 7.5);
    font-size: -webket-calc(100vw/7.5);
  }
  .w1398 > .left {
    display: none;
  }

  .box {
    width: 100%;
    /* height: 1237px; */
    background-color: #f1f4f9;
    font-size: 0.16rem;
    /* padding-bottom: 0.66rem; */
  }
  .box .mine {
    min-height: 10.36rem;
  }
  .w1398 {
    display: flex;
  }
  .menu {
    display: none;
  }
  .tj {
    width: 7.1rem;
    /* height: 5.23rem; */
    margin: 0.2rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    /* margin-top: 0.2rem; */
  }
  .tj h2 {
    font-size: 0.2rem;
    color: rgba(77, 77, 77, 1);
    line-height: 0.6rem;
    padding-left: 0.2rem;
    /* margin-top: 30px; */
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    font-size: 0.2rem;
  }
  .tj h2 span {
    float: right;
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: 0.58rem;
    margin-right: 0.22rem;
  }
  .tj ul {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  .tj ul li {
    width: 48%;
    margin: 1%;
    box-sizing: border-box;
    padding: 12px 0px;
  }
  .tj ul li .left {
    width: 0.45rem;
    height: 0.45rem;
    background: rgba(76, 180, 247, 1);
    border-radius: 0.06rem;
    margin-top: 0.08rem;
  }
  .tj ul li .right {
    margin-left: 3%;
    width: 2.5rem;
  }
  .tj ul li .right h3 {
    font-size: 0.2rem;
    line-height: 0.32rem;
  }
  .tj ul li .right p {
    font-size: 0.17rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

